/**
 * dialog 弹框标签
 * show() 打开弹框
 * showModal() 打开弹框并带遮罩层
 * open: 设置弹框样式
 * backdrop: 设置弹框遮罩层样式
 *
 */
'use client'
import { useRef } from 'react'
export default function Page(){

  const ref=useRef()

  return (
    <div>
      <p className={'p-20 bg-slate-100'}>
        <button className={'px-10 py-5 bg-blue-500 text-white'} onClick={()=> ref.current.showModal()} >打开</button>
      </p>
      <dialog ref={ref} className={'p-20 bg-pink-500 open:bg-blue-500 open:w-1/2 open:p-10 open:flex open:flex-col open:gap-y-5 backdrop:bg-gray-300/50 '}>
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下
        千里之行始于足下

        <button className={'px-8 py-3 bg-pink-500 text-white w-fit'} onClick={()=> ref.current.close()}>关闭</button>
      </dialog>
    </div>
  )
}
